<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            知识补充：
                传统的字符串在定义的时候是不允许回车的。比如下面这样是会报错的
                let str = '
                    a
                    b
                    c
                '
                但是模板字符串可以, 也就使用tab上面的那个波浪线作为字符串两边的标识。
                let str = `
                    a
                    b
                    c
                `
                但是话又说回来，我们js当年是没有模板字符串这个东西的，所以就有一些聪明的开发者想到了用数组的join方法，比如:
                let arr = [
                    'a',
                    'b',
                    'c'
                ]
                数组在定义的时候是可以换行的，所以我们arr.join('')即可得到'abc'这个字符串；

                这时候你肯定想问了，这玩意有啥用啊，别急，我来告诉你。
                你看: 
                let arr = [
                    '<div>',
                    '   <span>我是一个好人</span>',
                    '</div>'
                ]
                是不是发现用处了，没错，我们可以用join()方法让这个数组变成HTML语句字符串，从而渲染到页面上。这正是利用了数组可以换行，字符串可以被页面解析的特点。
        */ 
    </script>
    <ul class="list">
        <!-- <li>
            <h3>周杰伦</h3>
            <div>年龄: 43</div>
            <div>性别: 男</div>
        </li> -->
    </ul>
    <script>
        let list = document.querySelector('.list');
        let arr = [
            {
                name:'mikaisa1',
                age:18,
                sex:'男'
            },
            {
                name:'mikaisa2',
                age:19,
                sex:'男'
            },
            {
                name:'mikaisa3',
                age:20,
                sex:'男'
            },
        ];

        arr.forEach(item=>{
            // 同时我们可以利用字符串可以通过+进行拼接的特点，这样就实现了对于数据的智能渲染，比传统的js方法好用了很多
            // 这种方式曾几何时十分流行，直到后面vue等框架的出现
            list.innerHTML += [
            '<li>',
            '   <h3>姓名: '+item.name+'</h3>',
            '   <div>年龄: '+item.age+'</div>',
            '   <div>性别: '+item.sex+'</div>',
            '</li>',
            ].join('');
        })

    </script>
</body>
</html>